import $ from 'jquery'
import 'bootstrap'
import 'bootstrap/dist/js/bootstrap.min.js'

import { library } from '@fortawesome/fontawesome-svg-core'
import { far } from '@fortawesome/free-regular-svg-icons'
import { faDove, faLeaf, faHandHoldingHeart, faPlus, faHeart, faCheckCircle, faCircle, faClone, faCheck, faEye, faComments, faArchive, faPaperPlane } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

import './assets/main.css'

import AOS from 'aos'
import 'aos/dist/aos.css'

import axios from './util/RequestUtil'

library.add(far)
library.add(faDove)
library.add(faLeaf)
library.add(faHandHoldingHeart)
library.add(faPlus)
library.add(faHeart)
library.add(faCheckCircle)
library.add(faCircle)
library.add(faClone)
library.add(faCheck)
library.add(faEye)
library.add(faComments)
library.add(faArchive)
library.add(faPaperPlane)

const app = createApp(App)

AOS.init({
  duration: 700
})

$(window).on('scroll', function () {
  const st: number = $(window).scrollTop() ? Number($(window).scrollTop()) : 0
  $('.topnav').toggleClass(
    'bg-white navbar-light shadow-sm scrollednav py-0',
    st > 50
  )
})

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// Register a global custom directive called `v-focus`
app.directive('focus', {
  // When the bound element is mounted into the DOM...
  mounted(el) {
    // Focus the element
    el.focus()
  }
})

app.use(pinia)
app.use(router)

app.provide('axios', axios)
app.component('font-awesome-icon', FontAwesomeIcon)

app.mount('#app')
